<template>
<p>当选中某一级时，动态加载该级下的选项。</p>
<div text="sm" m="y-4" data-v-72294632=""><p>通过<code>lazy</code>开启动态加载，并通过<code>lazyload</code>来设置加载数据源的方法。 <code>lazyload</code>方法有两个参数，第一个参数<code>node</code>为当前点击的节点，第二个<code>resolve</code>为数据加载完成的回调(必须调用)。 为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为<code>leaf</code>，可通过<code>props.leaf</code>修改)。 否则，将以有无子节点来判断其是否为叶子节点。</p>
</div>
  <el-cascader :props="props" />
</template>

<script lang="ts" setup>
import type { CascaderProps } from 'element-plus'

let id = 0
const props: CascaderProps = {
  lazy: true,
  lazyLoad(node, resolve) {
    const { level } = node
    setTimeout(() => {
      const nodes = Array.from({ length: level + 1 }).map((item) => ({
        value: ++id,
        label: `Option - ${id}`,
        leaf: level >= 2,
      }))
      // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
      resolve(nodes)
    }, 1000)
  },
}
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>